<template>
    <div style="display: flex;justify-content: space-between;align-items: center;">
        <div>
            <h1 class="title">用户组列表</h1>
        </div>
        <div>
            <el-button type="primary"  @click="createUGDrawer">
                <el-icon>
                    <Plus />
                </el-icon>
                创建</el-button>
        </div>
    </div>
    <div>
        <el-table  table-layout='auto'       highlight-current-row
            :data="ugList.slice((pagination.curPage - 1) * pagination.pageSize, pagination.curPage * pagination.pageSize)"
            border style="width: 100%">
            <el-table-column prop="id" label="ID" width="90" />
            <el-table-column prop="title" label="标题" />
            <el-table-column prop="desc" label="简介" />
            <el-table-column label="用户数量" width="120">
                <template #default="scope">
                    {{ scope.row?.userIdList?.split(',').length || 0 }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template #default="scope">


                    <el-button type="primary" text size="small"
                        @click="() => { this.$router.push(`/userCenter/userGroupInfo/${scope.row.id}`) }">查看</el-button>

                    <el-popconfirm confirm-button-text="确认" cancel-button-text="取消" width="200" title="删除后无法恢复，是否确认删除?"
                        @confirm="deleteUGByID(scope.row)">
                        <template #reference>
                            <el-button type="danger" text size="small">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="pagination">
        <el-pagination v-model:current-page="pagination.curPage" v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 25, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="ugList.length" />
    </div>

    <el-drawer v-model="ugDrawerVisible" direction="rtl">
        <template #header>
            <h4>用户组</h4>
        </template>
        <template #default>
            <div>
                <el-form v-model="curUG">
                    <el-form-item label="群组名称">
                        <el-input v-model="curUG.title"></el-input>
                    </el-form-item>
                    <el-form-item label="群组简介">
                        <el-input v-model="curUG.desc"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </template>
        <template #footer>
            <div style="flex: auto">
                <el-button @click="ugDrawerVisible = false">取消</el-button>
                <el-button type="primary" @click="createUG(curUG)">确认</el-button>
            </div>
        </template>
    </el-drawer>
</template>
<script>

import { useUserStore } from "../../store/userStore.js";
import { POST } from '../../util/axios.js'
export default {
    data() {
        return {
            ugDrawerVisible: false,
            ugList: [],
            pagination: {
                curPage: 1,
                pageSize: 10
            },
            curUG: { title: "", desc: "" }
        }
    },
    methods: {
        createUGDrawer() {
            this.ugDrawerVisible = true
            this.curUG = { title: "", desc: "" }
        },
        async createUG(ug) {
            this.curUG = ug
            this.ugDrawerVisible = true
            const userStore = useUserStore();
            let rs = await POST('/user/createUG', 'POST', { title: ug?.title, desc: ug?.desc, id: ug?.id }, false, null, true)
            // this.ugList = rs.data
            console.log(rs)
            if (rs.code == 200) {
                location.reload();
            }
            console.log("获取用户自己创建的问卷结果:::", rs)
        },
        async getUGList() {
            const userStore = useUserStore();
            let rs = await POST('/user/getUGListByUser', 'POST', userStore.userInfo, false, null, false)
            this.ugList = rs.data
            console.log("获取用户自己创建的问卷结果:::", rs)
        },
        async deleteUGByID(ug) {
            let rs = await POST('/user/deleteUGByID', 'POST', { id: ug.id }, true, null, true)
            console.log("删除用户自己创建的问卷结果:::", rs)
            if (rs.code == 200) {
                location.reload();
            }

        }
    },
    mounted() {
        this.getUGList()
    }
}
</script>
<style></style>